<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}	
			.div1{
				width: 200px;
				height: 200px;
				border: 1px solid #ccc;
				position: relative;
				margin-left: 20px;
				float: left;
			}
			.div2{
				width: 200px;
				height: 200px;
				border: 1px solid black;
				position: relative;
				margin-left: 20px;
				float: left;
			}
			.div3{
				width: 200px;
				height: 200px;
				border: 1px solid green;
				position: relative;
				margin-left: 20px;
				float: left;
			}
			p{
				background-color: chocolate;
				margin-top: 5px;
			}
		</style>
	</head>
	<body>
		<div class="div1" id="div1">
			<p id="pe1">拖拽1</p>
			<p id="pe2">拖拽2</p>
		</div>
		<div class="div2" id="div2">
		</div>
		<div class="div3" id="div3">
		</div>	
		<script>
			/* 
			 ondrag:拖拽整个过程监听			
			 ondragstart：拖拽开始监听
			 ondragleave拖拽离开监听
			 ondragend拖拽结束监听
			 */
			//var p=document.querySelector("#pe1")
			var obj=null;
			
			
			document.ondragstart=function(e){
				/*
					通过时间捕获获取当前元素
				*/console.log(e)
				e.target.style.opacity=0.5;
				e.target.parentNode.style.borderwidth="5px"
				obj=e.target;
			}
			document.ondragend=function(e){
				//console.log("ondragend")
				e.target.style.opacity=1;
					e.target.parentNode.style.borderwidth="1px"
			}
			document.ondragleave=function(){
				//console.log("ondragleave")
			}
			document.ondrag=function(){
				//console.log("ondrag")
			}
			/* 
				ondragenter 拖拽元素进入时间
				ondragover停留在目标元素上调用
				ondrop松开鼠标调用
				ondragleave鼠标离开目标元素调用
			 */
			//var div2=document.querySelector("#div2")
			document.ondragenter=function(e){
				//console.log("ondragenter")
			}
			document.ondragover=function(e){
				//console.log("ondragover")
				e.preventDefault()
			}
			/* 浏览器默认阻止 */
			document.ondrop=function(e){
				//console.log("ondrop")
				e.target.appendChild(obj)
			}
			document.ondragleave=function(e){
				console.log("ondragleave")
			}
			
			
		</script>
	</body>
</html>